<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Virtual background -- Agora</title>
  <link rel="stylesheet" href="../assets/bootstrap.min.css">
  <link rel="stylesheet" href="./index.css">
</head>
<body>


<!--
  Create the banner at the top of the page.
-->
<div class="container-fluid banner">
  <p class="banner-text">Virtual Background</p>
  <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
     class="Header-link " href="https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo">
    <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
  </a>
</div>

<!--
  When a user tries to join a Video Call without supplying an AccessToken, this button
  calls #success-alert in cloudProxy.js. #success-alert refreshes this page with the
  user information.
-->
<div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Congratulations!</strong><span> You can invite others join this channel by click </span><a href="" target="_blank">here</a>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!--
  When a user successfully joins a Video Call channel with an AccessToken, this section displays
  a banner with a close button.
-->
<div id="success-alert-with-token" class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Congratulations!</strong><span> Joined room successfully. </span>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!--
  When a user successfully joins a Video Call channel with an AccessToken, this section displays
  a banner with a close button.
-->
<div id="success-alert-with-token" class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Congratulations!</strong><span> Joined room successfully. </span>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div id="success-alert-processor-init" class="alert alert-success alert-dismissible fade hide" role="alert">
  <strong>Congratulations!</strong><span> Init virtual background processor successfully. </span>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="container">

  <!--
    Input fields so the user can securely join a Video Call channel.
  -->
  <form id="join-form">
    <div class="row join-info-group">
      <div class="col-sm">
        <p class="join-info-text">APP ID</p>
        <input id="appid" type="text" placeholder="Enter the appid" required>
        <p class="tips">You find your APP ID in the <a href="https://console.agora.io/projects">Agora Console</a></p>
      </div>
      <div class="col-sm">
        <p class="join-info-text">Token(optional)</p>
        <input id="token" type="text" placeholder="Enter the app token">
        <p class="tips">To create a temporary token, <a href="https://console.agora.io/projects">edit your project</a> in Agora Console.</p>
      </div>
      <div class="col-sm">
        <p class="join-info-text">Channel Name</p>
        <input id="channel" type="text" placeholder="Enter the channel name" required>
        <p class="tips">You create a channel when you create a temporary token. You guessed it, in <a href="https://console.agora.io/projects">Agora Console</a></p>
      </div>
      <div class="col-sm">
        <p class="join-info-text">User ID(optional)</p>
        <input id="uid" type="text" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')" placeholder="Enter the user ID">
      </div>
    </div>

    <!--
      Join or leave a Video Call channel.
    -->
    <div class="button-group g-10 mb-3">
      <button id="join" type="submit" class="btn btn-primary btn-sm">Join</button>
      <button id="leave" type="button" class="btn btn-primary btn-sm" disabled>Leave</button>
    </div>
    <div id="vb-area" class="fade hide">
      <div class="button-group g-10 mb-3">
        <p id="ai-status-tip" class="mb-3"></p>
        <input id="openVirtualBackground" type="submit" class="btn btn-primary btn-sm mb-3" value="Open Virtual Background for LocalVideoTrack"/>
      </div>
      <div class="button-group g-10 mb-3">
        <input id="enableVirtualBackground" type="submit" class="btn btn-primary btn-sm mb-3" value="Enable Virtual Background"/>
      </div>
      <div>
        <blockquote class="blockquote">
          <p id="vb-option-tip" class="mb-0"></p>
        </blockquote>
  
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link active" id="pills-blur-tab" data-v="blur" data-toggle="pill" href="#pills-blur" role="tab" aria-controls="pills-blur" aria-selected="true">Blur</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-color-tab" data-v="color" data-toggle="pill" href="#pills-color" role="tab" aria-controls="pills-color" aria-selected="false">Color</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-image-tab" data-v="image" data-toggle="pill" href="#pills-image" role="tab" aria-controls="pills-image" aria-selected="false">Image</a>
          </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-blur" role="tabpanel" aria-labelledby="pills-blur-tab">
            <h2>
              Blur effect
            </h2>
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-primary active">
                <input type="radio" name="options" class="vb-blur-level" data-level="1" checked> Level 1
              </label>
              <label class="btn btn-primary">
                <input type="radio" name="options" class="vb-blur-level" data-level="2"> Level 2
              </label>
              <label class="btn btn-primary">
                <input type="radio" name="options"  class="vb-blur-level" data-level="3"> Level 3
              </label>
            </div>
          </div>
          <div class="tab-pane fade" id="pills-color" role="tabpanel" aria-labelledby="pills-color-tab">
            <h2>Select a color</h2>
            <input type="color" id="vb-color-input" value="#00ff00">
          </div>
          <div class="tab-pane fade" id="pills-image" role="tabpanel" aria-labelledby="pills-image-tab">
            <!-- <label for="basic-url">Choose An Image</label> -->
            <h2>Choose An Image</h2>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon3">https://</span>
              </div>
              <input type="text" class="form-control" placeholder="xxxx.com/xxx" id="vb-image-url" aria-describedby="basic-addon3">
            </div>
          </div>
        </div>
  
        <input id="vb-require" type="submit" class="btn btn-primary btn-sm mb-3 mt-3" value="Change Effect"/>
  
        <!-- <input id="dump" type="submit" class="btn btn-primary btn-sm mb-3" value="Dump Audio"/> -->
      </div>
    </div>
  </form>
  <!--
    This local media splayer is enabled when the user has successfully joined a Video Call channel.
  -->
  <div class="row video-group">
    <div class="col">
      <p id="local-player-name" class="player-name"></p>
      <div id="local-player" class="player"></div>
    </div>
    <div class="w-100"></div>
    <div class="col">
      <div id="remote-playerlist"></div>
    </div>
  </div>
</div>

<!--
  Import the Agora Video Call SDK for Web and local calls to it.
-->
<script src="../assets/jquery-3.4.1.min.js"></script>
<script src="../assets/bootstrap.bundle.min.js"></script>
<script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
<script src="./agora-extension-virtual-background/agora-extension-virtual-background.js"></script>
<script src="./virtualBackground.js"></script>
</body>
</html>
